<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" th:href="@{/public/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/category/onenews.css}">
    <script th:src="@{/public/lib/jquery/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/public/lib/layui/layui.js}"></script>

<!--        thymeleaf语法-->
    <script th:inline="javascript">

        const error = /*[[${error}]]*/"";
        const news = /*[[${news}]]*/{};
        // const rating = /*[[${rating}]]*/"";


        $(() => {
            search();
            //新增按钮事件
            $(" #back-btn").click(() => {
                // 跳转到新页面
                history.back();
            })
            $("#submit-btn").click(()=>{
                save(function (success) {
                    if (success) {
                        layui.use(() => {
                            let layer = layui.layer;
                            layer.msg("评论成功");
                        });
                    }
                    search()
                });
            })
            $("#score-submit-btn").click(()=>{
                score_save(function (success) {
                    if (success) {
                        layui.use(() => {
                            let layer = layui.layer;
                            layer.msg("评分成功");
                        });
                    }
                    search()
                });
            })
        });

    //     函数部分
        function search() {
            // 获取电影id
            let id = /*[[${news.newid}]]*/""
            console.log(id)

            let url = "/api/v1/review/get";
            $.ajax({
                url,
                method: "get",
                dataType: "json",
                data: {
                    id,
                },
                success(resp) {//回调函数
                    //将数据渲染到页面上，执行dom操作   DOM：Document Object Model
                    if (resp.success) {
                        let data = resp.review;//评论信息数组
                        let $tbody = $("#tbl");
                        $tbody.empty();//把上次的数据内容清空
                        console.log(data);

                        data.forEach(it => {//it即遍历过程中的一个评论对象
                            let $tr = $("<tr>");//创建一个tr对象
                            $tr.append("<p>"+"评论人:"+"</p>")
                            $tr.append("<td id='username'>"+ it.username+"</td>");
                            $tr.append("<p>"+"评论内容:"+"</p>")
                            $tr.append("<td class='tcontent'>" + it.rcontent + "</td>");
                            $tr.append("<p>"+"评论时间:"+"</p>")
                            $tr.append("<td class='ttime'>" + it.rtime + "</td>");
                            $tbody.append($tr);
                        });
                    }else{
                        console.log("错了")
                    }

                }
            });
        }

    //     提交

            function save(cb) {
                let rcontent = $("#stuId").val();

                let  newsid=/*[[${news.newid}]]*/""

                let username =  sessionStorage.getItem("username");
                let rtime= new Date().toJSON().slice(0, 10)
                console.log(username)
                let url = "/api/v1/review/post"
                $.ajax({
                    url,
                    method: "post",
                    dataType: "json",
                    data: {
                        rcontent,
                        newsid,
                        username,
                        rtime
                    },
                    success(resp) {
                        if (typeof cb === "function") {
                            cb(resp.success);
                        }
                    }
                });
            }



        function score_save(cb) {
            // let rcontent = $("#stuId").val();

            let  newid=/*[[${news.newid}]]*/""
            // let newsid="1"
            let userid =  sessionStorage.getItem("username");
            // let userid ="1";
            // let rtime= new Date().toJSON().slice(0, 10)

            let score=$("#scoreId").val();

            console.log(score,userid,newid)
            let url = "/api/v1/rating/post";

            if(score<0||score>100){
                layui.use(() => {
                    let layer = layui.layer;
                    layer.msg("请输入0——100内的数字");
                });
            }else {
                $.ajax({
                    url,
                    method: "post",
                    dataType: "json",
                    data: {
                        // rcontent,
                        newid,
                        userid,
                        score
                        // rtime
                    },
                    success(resp) {
                        if (typeof cb === "function") {
                            cb(resp.success);
                        }
                    }
                });
            }
        }

    </script>

</head>
<body>

<!--电影简介展示-->
<div id="newsdata">

<!--    <div id="newid" th:value="${news.id}"></div>-->

    <div id="dtitle"><h1 th:text="${news?.title}" id="titlenews">找不到电影</h1></div>
    <div id="dcontent"><p th:utext="${news?.content}" id="contentnews"></p></div>
    <div id="aver-score"><p>评分：</p><p th:text="${rating}" id="scorenews"></p></div>
    <div id="dauthor"><p>导演：</p><p th:text="${news?.author}" id="authornews"></p></div>
    <div id="dtime"><p>时间：</p><p th:text="${news?.time}" id="timenews"></p></div>
</div>

<!--返回上级目录-->
<div id="back">
    <div>
        <button id="back-btn" type="button">返回</button>
    </div>
</div>
<!--评分-->
<div >
    <div id="score">
        <form id="score-form" action="">
            <div>
                <label for="scoreId">留下您的评分：</label>
                <input type="number" id="scoreId" autocomplete="off" oninput="value=Math.floor(value)" placeholder="请输入您的评分">

            </div>
            <button id="score-submit-btn" type="button">提交</button>
        </form>
    </div>
</div>


<!--    进行评论-->
<div >
    <div id="review">
        <form id="review-form" action="">
            <div>
                <label for="stuId">留下您的评论：</label>
                <input type="text" id="stuId" autocomplete="off" placeholder="请输入您的评论">
            </div>
        <button id="submit-btn" type="button">提交</button>
        </form>
    </div>
</div>


    <!--评论展示-->
<div id="reviewtitle"><h2>评论区</h2></div>
    <div id="reviewshow">
      <table id="tbl">

      </table>
    </div>
</body>
</html>